<template>
  <a-card :bordered="false">
    <a-spin :spinning="spinning != 0">
      <!-- 查询区域-->

      <!-- 操作按钮区域 -->
    <div class="table-operator" style="margin-top: 1px">
            <a-button @click="initApi" type="primary"
                      icon="plus">
                {{ $t('m.common.button.initializeInterface') }}
            </a-button>
            <a-button @click="createApiByTable" type="default"
                      icon="plus">
              {{ $t('m.common.button.selectTableGenInterface') }}
            </a-button>
            <a-button @click="handleBatchDel" type="default"
                      icon="delete">
              {{ $t('m.common.button.delete') }}
            </a-button>
            <a-button @click="createCustomApi" type="default"
                      icon="plus">
              {{ $t('m.common.button.addInterface') }}
            </a-button>

    </div>

      <!-- table区域-begin -->
    <div>
        <a-table
                ref="table"
                size="middle"
                :rowKey="rowKey"
                bordered
                :columns="columns"
                :dataSource="dataSource"
                :pagination="pagination"
                :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
                @change="handleTableChange"
                :customRow="clickThenCheck"
        >
            <template slot="serialNum" slot-scope="text,record,index">
              {{(pagination.current-1) * pagination.pageSize + parseInt(index) + 1}}
            </template>
            <template slot="action" slot-scope="text, record">
              <a @click="handleEdit(record)">
                {{ $t('m.common.button.update') }}
              </a>
              <a-divider type="vertical" />
              <a @click="viewDoc(record)">
                {{ $t('m.common.button.document') }}
              </a>
              <a-divider type="vertical" />
              <a @click="handleDel(record)">
                {{ $t('m.common.button.delete') }}
              </a>
            </template>
        </a-table>
    </div>
    </a-spin>
    <SelectTableDialog ref="selectTable" @selectFinished="selectFinished" :groupId="groupId"></SelectTableDialog>
  </a-card>
</template>

<script>

  import {ViewMixin} from '@/mixins/ViewMixin'
  import {postAction} from '@/api/manage'
  import SelectTableDialog from './modules/SelectTableDialog'

  export default {
    name: "DataApiList",
    mixins: [ViewMixin],
    components: {
      SelectTableDialog
    },
    props: {
      groupId: {
        type: String,
        required: true
      },
    },
    data() {
      return {
        formCode: 'MagicApiFileForm',
        tableName: 'magic_api_file',
        dictConfig: {},
        optionConfig: {},
    columns: [
        {
            title:this.$t('m.common.label.number'),
            dataIndex: '',
            key: 'rowIndex',
            width: 50,
            align: "center",
            scopedSlots: { customRender: 'serialNum' },
        },
        {
            title: this.$t('m.common.label.interfaceName'),
            dataIndex: 'name',
            width: 200,
            align: 'center',
            ellipsis: true,
        },
        {
          title: this.$t('m.eform.apptable.entity.tableName'),
          dataIndex: 'tableName',
          width: 100,
          align: 'center',
          ellipsis: true,
        },
        /*{
            title: 'file_content',
            dataIndex: 'fileContent',
            align: 'center',
        },*/
        /*{
            title: '所属应用',
            dataIndex: 'groupId',
            align: 'center',
        },
        {
            title: '类型 1：分组 2:分组信息 3:接口',
            dataIndex: 'type',
            align: 'center',
        },*/
        {
            title: this.$t('m.common.label.operate'),
            dataIndex: 'action',
            align: "center",
            width: 150,
            scopedSlots: { customRender: 'action' },
        }
    ],
        url: {
          list: "/api/eform/dataApi/manage/list",
          delete: "/api/eform/dataApi/manage/delete",
          deleteBatch: "/api/eform/dataApi/manage/deleteBatch",
          exportXlsUrl: "/api/eform/dataApi/manage/exportExcel",
          importExcelUrl: "/api/eform/dataApi/manage/importExcel",
          genApi:"/api/eform/dataApi/manage/genApi",
          createCustomApi:"/api/eform/dataApi/manage/createCustomApi"
        },
      }
    },
    computed: {
      importExcelUrl: function () {
        return `${bootConfig[process.env.NODE_ENV].VUE_APP_URL}/${this.url.importExcelUrl}`;
      }
    },
    methods: {
      handleEdit(record) {
        if (!record) {
          if (this.selectedRowKeys.length != 1) {
            this.messageUtil.warning(this.$t('m.common.tip.select_one_warn'));
            return;
          }
          record = this.selectionRows[0];
        }
        let id = record.id
        let groupId = record.groupId
        let baseMagicUrl = bootConfig[process.env.NODE_ENV].MAGICAPI_URL || bootConfig[process.env.NODE_ENV].VUE_APP_API

        window.open(baseMagicUrl+"/magic/web/index.html?apiId="+id+"&groupId="+groupId)
        //this.$refs.form.edit(record.id);
      },
      viewDoc(record){
        if (!record) {
          if (this.selectedRowKeys.length != 1) {
            this.messageUtil.warning(this.$t('m.common.tip.select_one_warn'));
            return;
          }
          record = this.selectionRows[0];
        }
        let id = record.id
        let groupName = record.groupName
        let baseMagicUrl = (bootConfig[process.env.NODE_ENV].MAGICAPI_URL || bootConfig[process.env.NODE_ENV].VUE_APP_API) + "/magic"
        window.open(baseMagicUrl+"/doc.html#/数据服务接口/"+groupName+"/"+id)
      },
      initApi(){
        if(this.groupId && this.groupId.length>0){
          let that = this
          that.spinning++
          postAction(this.url.genApi, { groupId: this.groupId }).then((res) => {
            if (res.success) {
              that.loadData()
              that.messageUtil.success(res.message)
            } else {
              that.messageUtil.warning(res.message)
            }
          }).finally(() => {
            this.selectedRowKeys = []
            that.spinning--
          })
        }else{
          this.messageUtil.warning('请在左侧树选择分类下的应用！');
          return;
        }

      },
      selectFinished(selectedRowKeys, selectionRows){
        let that = this
        let tables = selectionRows.map(item=>{
          return {
            tableName:item.tableName,
            tableDesc:item.tableDesc,
            tableId:item.id
          }
        })
        that.spinning++
        postAction(this.url.genApi, { groupId: this.groupId,tables:tables,isInit:false }).then((res) => {
          if (res.success) {
            that.loadData()
            that.messageUtil.success(res.message)
          } else {
            that.messageUtil.warning(res.message)
          }
        }).finally(() => {
          that.spinning--
        })

      },
      createApiByTable(){
        if(!this.groupId || this.groupId.length<1){
          this.messageUtil.warning('请在左侧树选择分类下的应用！');
          return;
        }
        this.$refs.selectTable.groupId = this.groupId
        this.$refs.selectTable.visible = true
      },
      createCustomApi(){
        let that = this
        if(!this.groupId || this.groupId.length<1){
          this.messageUtil.warning('请在左侧树选择分类下的应用！');

          return;
        }
        that.spinning++
        postAction(this.url.createCustomApi, { groupId: this.groupId}).then((res) => {
          if (res.success) {
            let apiId = res.result;
            if(apiId && apiId.length>0){
              that.loadData()
              that.messageUtil.success(res.message)
              let baseMagicUrl = bootConfig[process.env.NODE_ENV].MAGICAPI_URL || bootConfig[process.env.NODE_ENV].VUE_APP_API

              window.open(baseMagicUrl+"/magic/web/index.html?apiId="+apiId+"&groupId="+that.groupId)
            }else{
              that.messageUtil.warning("新增接口失败")
            }


          } else {
            that.messageUtil.warning(res.message)
          }
        }).finally(() => {
          this.selectedRowKeys = []
          that.spinning--
        })
      }
    },
    watch: {
      groupId: {
        immediate: true,
        handler (value) {
          if (value) {
            this.queryParam = {
              groupId: value
            }
            this.loadData()
          } else {
            this.queryParam = {
              groupId: null
            }
            this.dataSource = []
          }
        }
      },

    },
  }
</script>
<style scoped>
</style>
